<template>
  <div>
    <div class="item-title">
      报警信息
    </div>
    <div class="item-body" @mousemove="move">
      <div class="table" @mouseleave="leave">
        <dv-scroll-board :config="config" @mouseover="over" style="width:100%;height:238px;" ></dv-scroll-board>
        <p
          v-if="tipShow"
          class="dv-text"
          :style="{ top: dvText.keyY, left: dvText.keyX }"
        >
          {{ dvText.name }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import {getEnergyWarnData} from '@/api/bigScreen'
export default {
  name: 'AlarmMessage',
  data() {
    return {
      dvText: {
        name: '',
        keyY: '',
        keyX: '',
      },
      tipShow: false, // 控制tooltip显隐
      config: {
        header: ['报警名称', '报警内容', '报警时间'],
        oddRowBGC:'#0b1e3b',
        evenRowBGC:'#123271',
        headerBGC:'#01193f',
        data: [
          // ['零用量', '水表持续零用量：终端设备名称-2023071753', '2025-06-13 09:01:01', '未处理'],
          // ['未上报', '水表持续未上报：终端设备名称-2023071753', '2025-06-13 09:01:01', '未处理'],
          // ['用量突增', '水表用量突增：终端设备名称-2023071753', '2025-06-13 09:01:01', '未处理'],
          // ['未上报', '水表持续未上报：终端设备名称-2023071753', '2025-06-13 09:14:01', '未处理'],
          // ['空管报警', '空管报警：终端设备名称-2023071748', '2025-06-13 09:17:01', '未处理'],
          // ['温度报警', '温度报警：终端设备名称-2023071754', '2025-06-13 10:01:01', '未处理'],
          // ['用量突增', '水表用量突增：终端设备名称-2023071753', '2025-06-13 10:31:01', '未处理'],
        ],
        index: false,
        // carousel:'page',
        align: ['center','center','center','center'],
        // headerBGC: ' transparent',
        // oddRowBGC: 'transparent',
        // evenRowBGC: 'transparent',
        waitTime: 2000,
        // carousel: 'page'
      }
    }
  },
  mounted() {
    this.getEnergyWarn();
  },
  watch:{
  },
  methods: {
    getEnergyWarn(){
      getEnergyWarnData(null).then(response => {
        if(response.code === 200) {
          this.config.data = [];
          if(response.data.length>0){
            let dataArr = new Array();
            for (let i = 0; i < response.data.length; i++) {
              const element = response.data[i];
              dataArr.push(element.warnParamName);
              dataArr.push(element.description);
              dataArr.push(element.recentlyWarnTime);
            }
            this.config.data = [dataArr];
          }
          this.config={...this.config}
        }
      })
    },
    over(dom) {
      this.tipShow = true
      //v.ceil拿到单元格数据
      this.dvText.name = dom.ceil
      //没有值则直接隐藏悬浮框 不然如果设置padding会有背景
      if (this.dvText.name === undefined) {
        this.tipShow = false
      }
    },
    move(e) {
      this.dvText.keyX = e.pageX + 'px'
      this.dvText.keyY = e.pageY - 60 + 'px'
    },
    leave() {
      this.tipShow = false;
    },
  }
}
</script>
<style src="../../../assets/static/css/bigscreen.css" scoped></style>
<style lang="scss" scoped>
.item-body {
  padding: 0 10px;
  cursor: pointer;
  // ::v-deep .dv-scroll-board .header .header-item{
  //   border: 1px solid #42b2fe !important;
  //   margin-left: -1px !important;
  // }
  // ::v-deep .dv-scroll-board .rows{
  //   border-left: 1px solid #42b2fe !important;
  //   margin-left: -1px !important;
  // }
  // ::v-deep .dv-scroll-board .rows .ceil{
  //   border: 1px solid #42b2fe !important;
  //   margin-left: -1px !important;
  //   margin-top: -1px !important;
  // }
}
.dv-text {
  // background: #666;
  padding: 5px;
  font-size: 14px;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
